Skip to content

feat: add dark/light mode toggle with localStorage persistence#209

Closed
shubh22-u wants to merge 4 commits into
komalharshita:mainfrom
shubh22-u:feat/dark-light-mode
Closed

feat: add dark/light mode toggle with localStorage persistence#209
shubh22-u wants to merge 4 commits into
komalharshita:mainfrom
shubh22-u:feat/dark-light-mode

Conversation

@shubh22-u

@shubh22-u shubh22-u commented May 17, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Summary [required]

This PR adds a Dark/Light mode toggle to the DevPath website.
The site previously had no theme switching option, which caused
eye strain for users browsing in low-light environments. A toggle
button (🌙/☀️) has been added to the navbar that smoothly switches
between dark and light themes, and the user's preference is saved
using localStorage so it persists across page refreshes.

Related Issue [required]

Closes #187

Type of Change [required]

  • Feature — adds new functionality
  • Style — CSS or visual changes only, no logic change

What Was Changed [required]

File Change made
templates/index.html Added 🌙/☀️ toggle button in navbar
static/style.css Added CSS variables for dark/light theme switching
static/script.js Added JavaScript toggle logic with localStorage persistence

How to Test This PR [required]

  1. Clone this branch: git checkout feat/dark-light-mode
  2. Install dependencies: pip install -r requirements.txt
  3. Run the app: python app.py
  4. Open http://127.0.0.1:5000
  5. Look for the 🌙 button in the navbar (top right)
  6. Click it — page should switch to dark mode
  7. Refresh the page — dark mode should still be active
  8. Click ☀️ to switch back to light mode
  9. Run the tests: python tests/test_basic.py

Expected test output:

Test Results [required]

This is a frontend-only change (HTML, CSS, JS).
No Python logic was modified. All existing tests pass as no
backend code was changed.

Screenshots (if UI change)

Before After
No toggle button in navbar 🌙 toggle button visible in navbar
Only light theme available Dark mode activates on click

Self-Review Checklist [required]

  • I have read CONTRIBUTING.md and followed all guidelines
  • My branch name follows the convention: feat/dark-light-mode
  • I have not introduced any print() or console.log() debug statements
  • I have not modified files outside the scope of the linked issue
  • If I changed the UI, I tested it at 375px (mobile) and 1280px (desktop)

Notes for Reviewer

The toggle button is placed in the navbar for easy access on all pages.
CSS variables are used for clean theme switching without overriding
existing styles. localStorage ensures the user preference is remembered
across sessions. Please test on both mobile and desktop views.

Closes #<187>

Added dark/light mode toggle button in navbar.

Changes made:

  • templates/index.html → Added toggle button (🌙/☀️) in navbar
  • static/style.css → Added CSS variables and dark-mode styles
  • static/script.js → Added JavaScript toggle logic with localStorage

@vercel

vercel Bot commented May 17, 2026

Copy link
Copy Markdown

@shubh22-u is attempting to deploy a commit to the komalsony234-1530's projects Team on Vercel.

A member of the Team first needs to authorize it.

komalharshita
komalharshita requested changes May 24, 2026
View reviewed changes

@komalharshita komalharshita left a comment

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for contributing a dark/light mode feature for DevPath. The implementation direction is good overall, and I appreciate the use of localStorage persistence and CSS variables. However, after a detailed review, there are several important issues that should be addressed before this can be merged.

Main concerns
The dark mode token system is incomplete and currently overrides only a subset of the existing design variables, which can lead to inconsistent UI states across components.
The implementation does not support prefers-color-scheme, so system theme preferences are ignored.
Theme initialization happens after render, which may cause a flash of incorrect theme (FOUC).
Accessibility is incomplete — the toggle should also update aria-pressed state dynamically.
The current emoji-based icon approach is inconsistent across platforms and would be better replaced with SVG icons.
Mobile navigation does not appear to include theme toggle support.
Since this PR changes global styles, the full UI should be verified across:
forms
recommendation cards
dropdowns
buttons
loading states
mobile layouts
footer/components
The PR currently has merge conflicts and needs to be rebased against the latest main branch before further review.

Please resolve the merge conflicts, retest the UI thoroughly, and improve the theme architecture/accessibility before this can be considered for merge.

@komalharshita komalharshita added the need review Further information is requested label May 24, 2026
@komalharshita

komalharshita commented Jun 1, 2026

Copy link
Copy Markdown
Owner

Closing this PR for inactivity

@komalharshita komalharshita added gssoc:invalid This doesn't seem right and removed need review Further information is requested type:accessibility ui type:feature labels Jun 1, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@komalharshita komalharshita komalharshita requested changes

Assignees

No one assigned

Labels

gssoc:invalid This doesn't seem right gssoc-2026

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Add Dark/Light Mode Toggle to Improve User Experience

2 participants

@shubh22-u @komalharshita